<template>
         <div id="box">
               <header>
                     <img class="fh" :src="fh" alt="" @click="back">
                     <span class="title">修改密码</span>
               </header>
              <nav>
                     <input class="name" v-model="phone" :style="sj" type="number" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)" />
                     <!-- <div class="yz">
                            <input class="yzm" :style="aq" v-model="sjyz" type="number" placeholder="请输入随机验证码" oninput="if(value.length>4)value=value.slice(0,4)" />
                            <a class="random" href="javascript:;" @click="random" >{{sjs}}</a>
                     </div> -->
                     <div class="yz">
                            <input class="yzm" :style="aq" type="number" v-model="dxyz" placeholder="请输入短信验证码" oninput="if(value.length>4)value=value.slice(0,4)" />
                            <button class="note" :disabled="btnloading" @click="time" >{{note}}</button>
                     </div>
                     <input class="name" :style="mm" v-model="pasd" type="password" placeholder="请输入6-16位字母及数字组合密码" oninput="if(value.length>16)value=value.slice(0,16)" />
                     <button class="reg" @click="regster" >完成</button>
               </nav>
         </div>
</template>

<script>
import fh from "@/assets/img/fh_02.jpg"

export default {
        data(){
              return{
                    phone:"",
                    sjyz:"",
                    dxyz:"",
                    pasd:"",
                    fh,
                    sjs:"",
                    djs:"10",
                    fhyzm:'',
                    note:"点击获取验证码",
                    btnloading:false,
                    qhtb:"iconfont icon-gouyonghu-copy",
                  sj:{
                    backgroundImage: "url(" + require("../assets/img/ip_06.jpg") + ") ",
                    backgroundRepeat: "no-repeat",
                    backgroundSize:"0.66rem 0.96rem",
                    backgroundPosition:"left 0.6rem top 0.52rem",
                },
                  aq:{
                    backgroundImage: "url(" + require("../assets/img/aq_03.jpg") + ") ",
                    backgroundRepeat: "no-repeat",
                    backgroundSize:"0.68rem 0.78rem",
                    backgroundPosition:"left 0.6rem top 0.65rem",
                },
                mm:{
                    backgroundImage: "url(" + require("../assets/img/ip_10.jpg") + ") ",
                    backgroundRepeat: "no-repeat",
                    backgroundSize:"0.68rem 0.78rem",
                    backgroundPosition:"left 0.6rem top 0.68rem",
                },
              }
        },
        methods:{
              back(){
               this.$router.go(-1)
           },
              
              time(){
                  if(!this.phone) return mui.toast("手机号未填");
                  if(!/^1[123456789]\d{9}$/.test(this.phone)) return mui.toast('手机号格式不对');
                   this.$http.post("/api/login/sendSms?phone="+this.phone)
                      .then(res=>{
                        //     console.log(res.data)
                            if(res.data.code==200){
                                  mui.toast("发送成功")
                                  this.fhyzm = res.data.data
                              //     console.log(this.fhyzm)
                            }
                            if(res.data.code==503){
                                  mui.toast("发送失败")
                            }
                      })   
                 var djs = 60
                 var time = setInterval(() => {
                          djs--;
                          this.btnloading = true;
                          this.note = "验证码已发送(" + djs + ")"
                          if(djs==0){
                              clearInterval(time)  
                              this.btnloading = false;
                              this.note = "重新发送"  
                          }
                 },1000);
            },
            regster(){
            if(!this.phone) return mui.toast("手机号未填");
            if(!/^1[123456789]\d{9}$/.test(this.phone)) return mui.toast('手机号格式不对');
            if(this.dxyz!=this.fhyzm) return mui.toast("验证码输入有误,请重新检查")
            if(!this.pasd) return mui.toast("请设置密码")
            if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.pasd)) return mui.toast('请设置6-16位字母及数字组合密码')
               var qs = require('qs')
               this.$http.post("/api/login/change_password",qs.stringify({'phone':this.phone,'password':this.pasd}))
                .then(res=>{
                  //      console.log(res.data)
                      if(res.data.code=="503"){
                            mui.toast("用户不存在")
                      }
                      if(res.data.code=="200"){
                            mui.toast("密码修改成功")
                            this.$router.push({name:'login'})
                      }
                      if(res.data.code=="504"){
                            mui.toast("请联系客服")
                      }
                })
          },
        },
        mounted(){
             
        },
}
</script>

<style lang="less" scoped>
         #box{
               width:100%;
               height:100%;
               background:#fff;
         }
         header{
               width:100%;
               height:1.88rem;
               background:#fff;
               display:flex;
         }
         .fh{
             width:1.55rem;
             height:1.29rem;   
             z-index:100;
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               margin-left:30%;
               letter-spacing:0.02rem;
                position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
         .kbbtp{
             width:4.5rem;
             height:4.5rem;
             position:relative;
             left:0;
             right:0;
             top:15%;
             margin:0 auto;
         }
         nav{
               width:100%;
               background:#fff;
               position:relative;
               display:flex;
               flex-direction:column;
         }
         input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
                  /* WebKit browsers */ 
                  color: #c0c0c0; 
                  } 
                  input:-moz-placeholder, textarea:-moz-placeholder { 
                  /* Mozilla Firefox 4 to 18 */ 
                  color: #c0c0c0; 
                  } 
                  input::-moz-placeholder, textarea::-moz-placeholder { 
                  /* Mozilla Firefox 19+ */ 
                  color: #c0c0c0; 
                  } 
                  input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
                  /* Internet Explorer 10+ */ 
                  color: #c0c0c0; 
                  }
         .name{
               border:none;
               width:90%;
               height:2.16rem;
               left:0;
               right:0;
               margin-bottom:0.6rem;
               margin:0 auto;
               border-radius:0.18rem;
               margin-bottom:0.6rem;
               background:#f3f3f3;
               padding-left:1.8rem;
               color: #c0c0c0; 
         }
         .yzm{
               border:none;
               width:50%;
               height:2rem;
               position: relative;
               left:5%;
               margin-bottom:0.6rem;
               border-radius:0.18rem;
               margin-bottom:0.6rem;
               background:#f3f3f3;
               padding-left:1.8rem;
               color: #c0c0c0; 
         }
         .yz{
             display:flex;
             position: relative;
         }
         .random{
             width:35%;
             height:2rem;
             background:#35c8ff;
             border-radius:0.24rem;
             position: absolute;
             right:5%;
             text-align:center;
             line-height:2rem;
             color:#fff;
             letter-spacing:0.1rem;
             font-size:0.8rem;
         }
         .note{
             width:35%;
             height:2rem;
             font-size:0.5rem;
             background:#35c8ff;
             border-radius:0.24rem;
             position: absolute;
             right:5%;
             color:#fff;
             border:none;
         }
         .reg{
         	   border:none;
               width:80%;
               height:1.8rem;
               left:0;
               right:0;
               margin:0 auto;
               border-radius:0.16rem;
               font-size:0.6rem;
               color:#fff;
               letter-spacing:0.1rem;
            background: #0dafe6; /* Old browsers */
            background: -moz-linear-gradient(left, #0dafe6 0%, #2989d8 51%, #207cca 100%, #1c89fe 100%, #207cca 101%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #0dafe6 0%,#2989d8 51%,#207cca 100%,#1c89fe 100%,#207cca 101%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #0dafe6 0%,#2989d8 51%,#207cca 100%,#1c89fe 100%,#207cca 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dafe6', endColorstr='#207cca',GradientType=1 ); /* IE6-9 */
                  }        
</style>